<template>
  <div class="props-option">
    <el-collapse v-model="activeNames" >
      <el-collapse-item title="布局" name="layout" v-if="chartConf && chartConf.layout">
        <el-row>
          <el-col :span="12">
            W:<el-input-number placeholder="宽度" size="small" v-model="chartConf.layout.width" controls-position="right" class="input-class" >
                 <template slot="append">px</template>
              </el-input-number>
          </el-col>
          <el-col :span="12">
            H:<el-input-number placeholder="高度" size="small" v-model="chartConf.layout.height" controls-position="right" class="input-class">
            <template slot="append">px</template>
          </el-input-number>
          </el-col>
        </el-row>
        <el-row class="mt10">
          <el-col :span="12">
            X:<el-input-number placeholder="X轴" size="small" v-model="chartConf.layout.offsetLeft" controls-position="right" class="input-class" >
            <template slot="append">px</template>
          </el-input-number>
          </el-col>
          <el-col :span="12">
           Y:<el-input-number placeholder="Y轴" size="small" v-model="chartConf.layout.offsetTop"  controls-position="right" class="input-class">
            <template slot="append">px</template>
          </el-input-number>
          </el-col>
        </el-row>
        <el-row class="mt10">
          <el-col :span="24" class="text-left">
            <span class="inlineBlock text-middle">背景色:</span>
            <el-color-picker class="text-middle" v-model="chartConf.css.background" show-alpha :predefine="predefineColors"></el-color-picker>
          </el-col>
        </el-row>
      </el-collapse-item>
<!--      外观配置-->
      <el-collapse-item title="外观" name="board" v-if="chartConf && chartConf.css">
        <el-row class="text-left">
          <el-col :span="4">
            <el-tooltip class="item" effect="dark" content="显示边框四个角" placement="bottom">
              <i class="cp icon-square-circle"></i>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="显示边框四个角" placement="bottom">
              <i class="el-icon-full-screen cp"></i>
            </el-tooltip>
          </el-col>
          <el-col :span="20">
            <el-input-number class="wd40 pd-left5 pd-right5 text-left" v-model="borderTopLeftRadius" controls-position="right"  size="mini" ></el-input-number>
            <el-input-number class="wd40 pd-left5 pd-right5 text-left" v-model="borderTopRightRadius" controls-position="right"  size="mini" ></el-input-number>
            <el-input-number class="wd40 pd-left5 pd-right5 text-left" v-model="borderBottomLeftRadius" controls-position="right"  size="mini" ></el-input-number>
            <el-input-number class="wd40 pd-left5 pd-right5 text-left" v-model="borderBottomRightRadius" controls-position="right"  size="mini" ></el-input-number>
          </el-col>
        </el-row>
        <el-row class="text-left mt10">
          <el-col :span="4">
            <el-tooltip class="item" effect="dark" content="是否显示边框" placement="bottom">
              <el-checkbox v-model="chartConf.css.strokeVisiable"></el-checkbox>
            </el-tooltip>
          </el-col>
          <el-col :span="20">
              <el-row>
                <el-col>
                  <el-color-picker class="text-middle" v-model="chartConf.css['border-color']" show-alpha :predefine="predefineColors"></el-color-picker> <span class="ml0 text-middle inlineBlock">描边</span>
                </el-col>
              </el-row>
          </el-col>
        </el-row>

        <el-row class="text-left" v-if="chartConf.css.strokeVisiable">
          <el-col>
            <el-radio-group size="mini" v-model="chartConf.css['border-style']">
              <el-radio-button label="solid"> <i class="cp icon-square-solid"></i></el-radio-button>
              <el-radio-button label="dashed"> <i class="cp icon-square-dashed"></i> </el-radio-button>
              <el-radio-button label="dotted"> <i class="cp icon-square-dotted"></i></el-radio-button>
              <el-radio-button  label="double"> <i class="cp icon-square-double"></i></el-radio-button>
              <el-radio-button label="groove"> <i class="cp icon-square-groove"></i></el-radio-button>
              <el-radio-button label="ridge"> <i class="cp icon-square-ridge"></i></el-radio-button>
              <el-radio-button label="outset"> <i class="cp icon-square-outset"></i></el-radio-button>
              <el-radio-button label="inset"> <i class="cp icon-square-inset"></i></el-radio-button>
            </el-radio-group>
            <el-input-number  class="wd40 pd-left5 pd-right5 text-left" v-model="borderwidth"  controls-position="right"  size="mini" ></el-input-number>
          </el-col>
        </el-row>

<!--        显示阴影-->
        <el-row class="text-left mt10">
          <el-col :span="4">
            <el-tooltip class="item" effect="dark" content="显示阴影" placement="bottom">
              <el-checkbox v-model="chartConf.css.shadowVisiable"></el-checkbox>
            </el-tooltip>
          </el-col>
          <el-col :span="20">
            <el-row>
              <el-col>
                <el-color-picker class="text-middle" v-model="shadowColor" show-alpha :predefine="predefineColors"></el-color-picker> <span class="ml0 text-middle inlineBlock">阴影</span>
              </el-col>
            </el-row>
            <el-row  v-if="chartConf.css.shadowVisiable">
               <el-col :span="6">
                 <el-input-number class="wd40 pd-left5 pd-right5 text-left" v-model="hShadow" controls-position="right"  size="mini" :min="-999" :max="999" ></el-input-number>
                </el-col>
              <el-col :span="6">
                <el-input-number class="wd40 pd-left5 pd-right5 text-left" v-model="vShadow" controls-position="right"  size="mini" :min="-999" :max="999" ></el-input-number>
               </el-col>
              <el-col :span="6">   <el-input-number class="wd40 pd-left5 pd-right5 text-left" v-model="blur" controls-position="right"  size="mini" :min="-999" :max="999" ></el-input-number>
               </el-col>
              <el-col :span="6">   <el-input-number class="wd40 pd-left5 pd-right5 text-left" v-model="spread" controls-position="right"  size="mini" :min="-999" :max="999" ></el-input-number>
               </el-col>
            </el-row>

            <el-row v-if="chartConf.css.shadowVisiable" >
              <el-col :span="6" class="text-center">
                 X
              </el-col>
              <el-col :span="6" class="text-center">
                Y
              </el-col>
              <el-col :span="6" class="text-center">
               模糊
              </el-col>
              <el-col :span="6" class="text-center">
                扩散
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-collapse-item>
      <!--      文本-->
      <el-collapse-item title="文本" name="text" v-if="chartConf && chartConf.font">
        <el-row >
          <el-col :span="10">
            <el-select v-model="fontSize" placeholder="字体大小">
              <el-option
                v-for="item in fontsizeList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-color-picker  v-model="chartConf.font['color']" show-alpha :predefine="predefineColors"></el-color-picker>
          </el-col>
          <el-col :span="10">
            <el-select v-model="chartConf.font['font-family']" placeholder="字体">
              <el-option
                v-for="item in fontfamilys"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row class="text-left mt10">
          <el-col :span="12">
            <el-radio-group size="mini" v-model="chartConf.font['justify-content']" class="text-center">
              <el-radio-button label="left"> 左</el-radio-button>
              <el-radio-button label="center">中</el-radio-button>
              <el-radio-button label="right">右</el-radio-button>
            </el-radio-group>
          </el-col>
          <el-col :span="12">
            <el-radio-group size="mini" v-model="chartConf.font['align-items']" class="text-center">
              <el-radio-button label="flex-start">上</el-radio-button>
              <el-radio-button label="center">中 </el-radio-button>
              <el-radio-button label="flex-end">下</el-radio-button>
            </el-radio-group>
          </el-col>
        </el-row>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import sysconfig from '../../../../assets/js/sysconfig'
export default {
  name: 'PropsOption',
  props: {
    index: {
      type: Number
    }
  },
  data () {
    return {
      fontsizeList: sysconfig.fontsizeList,
      fontfamilys: sysconfig.fontfamilys,
      value: '',
      num: 1,
      color: 'rgba(255, 69, 0, 0.68)',
      predefineColors: sysconfig.predefineColors,
      activeNames: ['layout', 'board', 'text']
    }
  },
  computed: {
    // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'chartsConfig'
    ]),
    chartConf () {
      console.log(this.chartsConfig[this.$props.index])
      // 索引值
      return this.chartsConfig[this.$props.index]
    },
    borderwidth: {
      get () {
        return parseInt(this.chartConf.css['border-width'].replace('px', ''))
      },
      set (value) {
        this.chartConf.css['border-width'] = value + 'px'
      }
    },
    borderTopLeftRadius: {
      get () {
        return parseInt(this.chartConf.css['border-top-left-radius'].replace('px', ''))
      },
      set (value) {
        this.chartConf.css['border-top-left-radius'] = value + 'px'
      }
    },
    borderTopRightRadius: {
      get () {
        return parseInt(this.chartConf.css['border-top-right-radius'].replace('px', ''))
      },
      set (value) {
        this.chartConf.css['border-top-right-radius'] = value + 'px'
      }
    },
    borderBottomLeftRadius: {
      get () {
        return parseInt(this.chartConf.css['border-bottom-left-radius'].replace('px', ''))
      },
      set (value) {
        this.chartConf.css['border-bottom-left-radius'] = value + 'px'
      }
    },
    borderBottomRightRadius: {
      get () {
        return parseInt(this.chartConf.css['border-bottom-right-radius'].replace('px', ''))
      },
      set (value) {
        this.chartConf.css['border-bottom-right-radius'] = value + 'px'
      }
    },
    shadowColor: {
      get () {
        let colors = this.chartConf.css['box-shadow'].split(' ')
        return colors[4]
      },
      set (value) {
        let colors = this.chartConf.css['box-shadow'].split(' ')
        colors[4] = value
        this.chartConf.css['box-shadow'] = colors.join(' ')
      }
    },
    hShadow: {
      get () {
        let colors = this.chartConf.css['box-shadow'].split(' ')
        return parseInt(colors[0].replace('px', ''))
      },
      set (value) {
        let colors = this.chartConf.css['box-shadow'].split(' ')
        colors[0] = value + 'px'
        this.chartConf.css['box-shadow'] = colors.join(' ')
      }
    },
    vShadow: {
      get () {
        let colors = this.chartConf.css['box-shadow'].split(' ')
        return parseInt(colors[1].replace('px', ''))
      },
      set (value) {
        let colors = this.chartConf.css['box-shadow'].split(' ')
        colors[1] = value + 'px'
        this.chartConf.css['box-shadow'] = colors.join(' ')
      }
    },
    blur: {
      get () {
        let colors = this.chartConf.css['box-shadow'].split(' ')
        return parseInt(colors[2].replace('px', ''))
      },
      set (value) {
        let colors = this.chartConf.css['box-shadow'].split(' ')
        colors[2] = value + 'px'
        this.chartConf.css['box-shadow'] = colors.join(' ')
      }
    },
    spread: {
      get () {
        let colors = this.chartConf.css['box-shadow'].split(' ')
        return parseInt(colors[3].replace('px', ''))
      },
      set (value) {
        let colors = this.chartConf.css['box-shadow'].split(' ')
        colors[3] = value + 'px'
        this.chartConf.css['box-shadow'] = colors.join(' ')
      }
    },
    fontSize: {
      get () {
        return parseInt(this.chartConf.font['font-size'].replace('px', ''))
      },
      set (value) {
        this.chartConf.font['font-size'] = value + 'px'
      }
    }
  },
  methods: {
    handleRemove (file, fileList) {
      console.log(file, fileList)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.props-option {
 height: auto;
 width: auto;
}
.props-option .input-class .el-input-group__append{
  padding: 0 2px!important;
}

</style>
